<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字问人生 - 汉字心智测评</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4A6FA5',
            secondary: '#6B8EAF',
            accent: '#E76F51',
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .btn-hover {
        background-color: #3A5A85;
        transform: translateY(-2px);
      }
      .character-box {
        width: 80px;
        height: 80px;
        font-size: 32px;
        border: 2px solid #4A6FA5;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        transition: all 0.3s ease;
      }
      .character-box:focus-within {
        border-color: #E76F51;
        box-shadow: 0 0 0 3px rgba(231, 111, 81, 0.1);
      }
      .character-input {
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 32px;
        border: none;
        outline: none;
      }
      .fade-in {
        animation: fadeIn 0.5s ease-in;
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <div class="container mx-auto px-4 py-8 max-w-md flex-grow">
    <!-- 返回按钮 -->
    <div class="mb-8">
      <button id="back-button" class="text-primary hover:text-primary/80 transition-colors">
        <i class="fa fa-arrow-left mr-2"></i>返回
      </button>
    </div>

    <!-- 页面标题 -->
    <h1 class="text-2xl font-bold text-center text-primary mb-8">字问人生</h1>

    <!-- 性别选择 -->
    <div class="mb-8">
      <label class="block text-gray-700 font-medium mb-4">请选择你的性别：</label>
      <div class="space-y-3">
        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer radio-label transition-colors">
          <input type="radio" name="gender" value="男" class="w-5 h-5 text-primary" checked>
          <span class="ml-3 text-gray-700">男</span>
        </label>
        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer radio-label transition-colors">
          <input type="radio" name="gender" value="女" class="w-5 h-5 text-primary">
          <span class="ml-3 text-gray-700">女</span>
        </label>
        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer radio-label transition-colors">
          <input type="radio" name="gender" value="其他" class="w-5 h-5 text-primary">
          <span class="ml-3 text-gray-700">其他</span>
        </label>
      </div>
    </div>

    <!-- 年龄输入 -->
    <div class="mb-8">
      <label for="age" class="block text-gray-700 font-medium mb-4">请输入你的年龄：</label>
      <div class="flex items-center">
        <input 
          type="number" 
          id="age" 
          class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          placeholder="请输入"
          min="1"
          max="120"
        >
        <span class="ml-3 text-gray-500">岁</span>
      </div>
      <p id="age-error" class="hidden text-accent text-sm mt-2">请输入有效的年龄</p>
    </div>

    <!-- 问题输入 -->
    <div class="mb-8">
      <label for="question" class="block text-gray-700 font-medium mb-4">请输入你想探索的问题：</label>
      <textarea 
        id="question" 
        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent h-32 resize-none"
        placeholder="例如：我什么时候能发财？我该如何改善人际关系？"
      ></textarea>
      <p id="question-error" class="hidden text-accent text-sm mt-2">请输入你的问题</p>
    </div>

    <!-- 汉字输入 -->
    <div class="mb-8">
      <label class="block text-gray-700 font-medium mb-4 text-center">请写出一个你想到的汉字：</label>
      <div class="character-box">
        <input 
          type="text" 
          id="character-input" 
          class="character-input" 
          maxlength="1"
          placeholder="写"
        >
      </div>
      <p class="text-center text-sm text-gray-500">请输入单个汉字</p>
      <p id="character-error" class="hidden text-accent text-sm mt-2 text-center">请输入一个汉字</p>
    </div>

    <!-- 提交按钮 -->
    <button 
      id="submit-button" 
      class="w-full bg-primary text-white py-4 rounded-lg font-medium transition-all hover:btn-hover disabled:opacity-50 disabled:cursor-not-allowed"
      disabled
    >
      提交分析
    </button>
  </div>

  <!-- 加载动画 (默认隐藏) -->
  <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden fade-in">
    <div class="bg-white p-6 rounded-xl text-center">
      <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent mb-4"></div>
      <p class="text-gray-700">正在分析汉字中的深层含义，请稍候...</p>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 元素选择器
    const backButton = document.getElementById('back-button');
    const ageInput = document.getElementById('age');
    const questionInput = document.getElementById('question');
    const characterInput = document.getElementById('character-input');
    const submitButton = document.getElementById('submit-button');
    const ageError = document.getElementById('age-error');
    const questionError = document.getElementById('question-error');
    const characterError = document.getElementById('character-error');
    const loadingOverlay = document.getElementById('loading-overlay');
    const genderRadios = document.querySelectorAll('input[name="gender"]');

    // 返回按钮点击事件
    backButton.addEventListener('click', function() {
      window.location.href = 'index.html';
    });

    // 验证函数
    function validateForm() {
      const age = parseInt(ageInput.value);
      const question = questionInput.value.trim();
      const character = characterInput.value.trim();
      
      let isValid = true;
      
      // 验证年龄
      if (!(age >= 1 && age <= 120)) {
        ageError.classList.remove('hidden');
        isValid = false;
      } else {
        ageError.classList.add('hidden');
      }
      
      // 验证问题
      if (!question) {
        questionError.classList.remove('hidden');
        isValid = false;
      } else {
        questionError.classList.add('hidden');
      }
      
      // 验证汉字（简单验证，实际可能需要更严格的中文字符验证）
      if (!character || !/^[\u4e00-\u9fa5]+$/.test(character)) {
        characterError.classList.remove('hidden');
        isValid = false;
      } else {
        characterError.classList.add('hidden');
      }
      
      // 更新提交按钮状态
      submitButton.disabled = !isValid;
    }

    // 添加事件监听器
    ageInput.addEventListener('input', validateForm);
    questionInput.addEventListener('input', validateForm);
    characterInput.addEventListener('input', validateForm);

    // 为单选按钮标签添加点击效果
    document.querySelectorAll('.radio-label').forEach(label => {
      label.addEventListener('click', function() {
        // 移除所有标签的选中样式
        document.querySelectorAll('.radio-label').forEach(l => {
          l.classList.remove('border-primary', 'bg-blue-50');
        });
        // 为当前点击的标签添加选中样式
        this.classList.add('border-primary', 'bg-blue-50');
        // 选中对应的单选按钮
        const radio = this.querySelector('input[type="radio"]');
        radio.checked = true;
      });
    });

    // 初始化选中的单选按钮样式
    genderRadios.forEach(radio => {
      if (radio.checked) {
        const label = radio.closest('.radio-label');
        label.classList.add('border-primary', 'bg-blue-50');
      }
    });

    // 提交按钮点击事件
    submitButton.addEventListener('click', function() {
      // 显示加载动画
      loadingOverlay.classList.remove('hidden');
      
      // 获取用户输入
      const age = ageInput.value;
      const question = questionInput.value.trim();
      const character = characterInput.value.trim();
      
      // 获取选择的性别
      let selectedGender = '';
      genderRadios.forEach(radio => {
        if (radio.checked) {
          selectedGender = radio.value;
        }
      });
      
      // 保存用户信息到localStorage
      localStorage.setItem('wordQuestionGender', selectedGender);
      localStorage.setItem('wordQuestionAge', age);
      localStorage.setItem('userQuestion', question);
      localStorage.setItem('userCharacter', character);
      
      // 模拟分析过程
      setTimeout(function() {
        // 跳转到字问人生结果页面
        window.location.href = 'word-question-result.html';
      }, 2000);
    });
  </script>
</body>
</html>